<template>
    <UxDialog class="scaling-dialog dialog-responsive" :visible="value" @close="close()">
        <div class="scaling">
            <h2>Design Scaling Explained</h2>
            <p>Your designs may be scaled depending on the product size you choose. Every product has a particular
                reference garment size. If the product size is smaller than the reference size, designs placed on the
                front and back sides of the garment will be scaled down according to the garment's chest size, but the
                sleeve and neck label print areas will not be affected. On the other hand, if the product size is
                equivalent to or larger than the reference size, your design dimensions will remain the same. </p>
            <ul>
                <li>
                    <h3>Reference garment size: L</h3>
                    <figure>
                        <img v-lazy="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/scaling-min.png')" alt="">
                    </figure>
                </li>
            </ul>
            <p style="margin-top: 14px;">
                Embroidered designs will maintain their actual size across all garment sizes. If a garment has both DTG
                and embroidery on the same side, neither will be scaled.
            </p>
            <ul>
                <li>
                    <figure>
                        <img v-lazy="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/scaling-emb.png')" alt="">
                    </figure>
                </li>
            </ul>

        </div>
    </UxDialog>
</template>
<script>
export default {
    name: "ScalingDialog",
    props: ["value"],
    data () {
        return {};
    },
    watch: {
        value (newval, oldval) {
            if (newval && newval != oldval) {
                // 展示时
            }
        },
    },
    methods: {
        close () {
            this.$emit("input", null);
        },
    }
};
</script>
<style lang="scss" scoped>
.scaling-dialog::v-deep {
    .dialog-content {
        &>h2 {
            display: none;
        }

        &>h6 {
            // display: none;
        }
    }

    .dialog-body {
        max-width: 716px;
        box-sizing: border-box;

        &>.dialog-layout {
            transition: none;
            background: none;
        }
    }
}

.scaling {
    padding: 32px 40px 44px;

    h2 {
        text-align: center;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 16px;
        color: #292929;
        line-height: 18px;
        margin-bottom: 18px;
    }

    p {
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #292929;
        line-height: 22px;
        margin-bottom: 14px;
    }

    ul {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin: 0 -6px;

        li {
            padding: 0 6px;
            box-sizing: border-box;
            width: 100%;

            h3 {
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                font-size: 14px;
                color: #292929;
                line-height: 16px;
                margin-bottom: 8px;
            }

            figure {
                position: relative;
                height: 128px;

                img {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 100%;
                }
            }
        }
    }
}

@media (max-width: 960px) {
    .scaling-dialog::v-deep {
        .dialog-content>h2 {
            display: block;

            &::before {
                display: none;
            }
        }

        .dialog-body {
            max-width: initial;
        }
    }

    .scaling {
        height: 100vh;
        overflow-y: auto;
        padding: 20px 40px 44px !important;

        &>h2 {
            display: none;
        }

        &>p {
            margin-bottom: 16px;
        }

        &>ul {
            li {
                margin-bottom: 16px;

                figure {
                    width: 100%;
                    height: auto;

                    img {
                        width: 100%;
                        height: auto;
                    }
                }
            }
        }
    }
}
</style>
